<template>
    <div class="training-chat-page">
        <!-- 导航栏 -->
        <van-nav-bar left-text="Exit" left-arrow @click-left="handleExit">
            <template #title>
                <div class="nav-title">
                    <div class="character-info">
                        <van-image :src="character?.avatar_url || '/default-character.png'" width="32" height="32" round
                            fit="cover" />
                        <span>{{ character?.name }}</span>
                    </div>
                </div>
            </template>
            <template #right>
                <van-icon name="pause" @click="pauseTraining" />
            </template>
        </van-nav-bar>

        <!-- 训练状态栏 -->
        <div class="training-status">
            <div class="scenario-info">
                <van-icon :name="getScenarioIcon(scenario?.category)" />
                <span>{{ scenario?.title }}</span>
            </div>
            <div class="training-progress">
                <div class="progress-item">
                    <van-icon name="clock-o" />
                    <span>{{ formatTime(elapsedTime) }}</span>
                </div>
                <div class="progress-item">
                    <van-icon name="chat-o" />
                    <span>{{ messages.length }} messages</span>
                </div>
            </div>
        </div>

        <!-- 消息列表 -->
        <div class="messages-container" ref="messagesContainer">
            <div class="messages-list">
                <!-- 场景介绍消息 -->
                <div class="message system-message" v-if="scenario">
                    <div class="message-content">
                        <div class="scenario-intro">
                            <h4>{{ scenario.title }}</h4>
                            <p>{{ scenario.description }}</p>
                            <div class="scenario-objectives">
                                <strong>Objectives:</strong>
                                <ul>
                                    <li v-for="objective in getScenarioObjectives()" :key="objective">
                                        {{ objective }}
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 对话消息 -->
                <div v-for="message in messages" :key="message.id" class="message" :class="getMessageClass(message)">
                    <div class="message-avatar" v-if="message.sender_type === 'ai'">
                        <van-image :src="character?.avatar_url || '/default-character.png'" width="40" height="40" round
                            fit="cover" />
                    </div>
                    <div class="message-content">
                        <div class="message-header" v-if="message.sender_type === 'ai'">
                            <span class="sender-name">{{ character?.name }}</span>
                            <span class="message-time">{{ formatMessageTime(message.created_at) }}</span>
                        </div>
                        <div class="message-text">{{ message.content }}</div>
                        <!-- AI消息的反馈按钮 -->
                        <div class="message-actions" v-if="message.sender_type === 'ai'">
                            <van-button size="mini" :type="message.feedback === 'helpful' ? 'primary' : 'default'"
                                @click="giveFeedback(message, 'helpful')">
                                <van-icon name="good-job-o" />
                                Helpful
                            </van-button>
                            <van-button size="mini" :type="message.feedback === 'not_helpful' ? 'danger' : 'default'"
                                @click="giveFeedback(message, 'not_helpful')">
                                <van-icon name="close" />
                                Not Helpful
                            </van-button>
                        </div>
                    </div>
                    <div class="message-avatar" v-if="message.sender_type === 'user'">
                        <van-image src="/default-avatar.png" width="40" height="40" round fit="cover" />
                    </div>
                </div>

                <!-- 正在输入指示器 -->
                <div class="message ai-message" v-if="isAiTyping">
                    <div class="message-avatar">
                        <van-image :src="character?.avatar_url || '/default-character.png'" width="40" height="40" round
                            fit="cover" />
                    </div>
                    <div class="message-content">
                        <div class="typing-indicator">
                            <div class="typing-dots">
                                <span></span>
                                <span></span>
                                <span></span>
                            </div>
                            <span class="typing-text">{{ character?.name }} is typing...</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 输入区域 -->
        <div class="input-area">
            <!-- 快速回复建议 -->
            <div class="quick-replies" v-if="quickReplies.length > 0 && !showInput">
                <div class="quick-replies-header">
                    <span>Suggested responses:</span>
                </div>
                <div class="quick-replies-list">
                    <van-button v-for="reply in quickReplies" :key="reply.id" size="small" type="primary" plain
                        @click="selectQuickReply(reply)">
                        {{ reply.text }}
                    </van-button>
                </div>
            </div>

            <!-- 消息输入 -->
            <div class="message-input">
                <van-field v-model="inputMessage" type="textarea" placeholder="Type your response..." autosize
                    :disabled="isAiTyping" @keyup.enter="handleKeyUp" @focus="showInput = true"
                    @blur="handleInputBlur" />
                <div class="input-actions">
                    <van-button type="primary" size="small" :loading="isSending"
                        :disabled="!inputMessage.trim() || isAiTyping" @click="sendMessage">
                        Send
                    </van-button>
                </div>
            </div>

            <!-- 训练辅助工具 -->
            <div class="training-tools">
                <van-button size="mini" @click="showHints">
                    <van-icon name="bulb-o" />
                    Hint
                </van-button>
                <van-button size="mini" @click="showSuggestions">
                    <van-icon name="chat-o" />
                    Suggestions
                </van-button>
                <van-button size="mini" @click="pauseTraining">
                    <van-icon name="pause" />
                    Pause
                </van-button>
            </div>
        </div>

        <!-- 暂停弹窗 -->
        <van-popup v-model:show="showPausePopup" position="center" round>
            <div class="pause-popup">
                <div class="popup-header">
                    <h3>Training Paused</h3>
                </div>
                <div class="popup-content">
                    <p>Take a moment to reflect on the conversation so far.</p>
                    <div class="pause-stats">
                        <div class="stat-item">
                            <span class="label">Duration:</span>
                            <span class="value">{{ formatTime(elapsedTime) }}</span>
                        </div>
                        <div class="stat-item">
                            <span class="label">Messages:</span>
                            <span class="value">{{ messages.length }}</span>
                        </div>
                    </div>
                </div>
                <div class="popup-actions">
                    <van-button block @click="resumeTraining">Resume Training</van-button>
                    <van-button block type="danger" @click="endTraining">End Training</van-button>
                </div>
            </div>
        </van-popup>

        <!-- 提示弹窗 -->
        <van-popup v-model:show="showHintsPopup" position="bottom" :style="{ height: '50%' }" round>
            <div class="hints-popup">
                <div class="popup-header">
                    <h3>Training Hints</h3>
                    <van-icon name="cross" @click="showHintsPopup = false" />
                </div>
                <div class="popup-content">
                    <div class="hint-item" v-for="hint in currentHints" :key="hint.id">
                        <van-icon name="bulb-o" />
                        <span>{{ hint.text }}</span>
                    </div>
                </div>
            </div>
        </van-popup>

        <!-- 建议弹窗 -->
        <van-popup v-model:show="showSuggestionsPopup" position="bottom" :style="{ height: '60%' }" round>
            <div class="suggestions-popup">
                <div class="popup-header">
                    <h3>Response Suggestions</h3>
                    <van-icon name="cross" @click="showSuggestionsPopup = false" />
                </div>
                <div class="popup-content">
                    <div class="suggestion-item" v-for="suggestion in currentSuggestions" :key="suggestion.id"
                        @click="selectSuggestion(suggestion)">
                        <div class="suggestion-text">{{ suggestion.text }}</div>
                        <div class="suggestion-reason">{{ suggestion.reason }}</div>
                    </div>
                </div>
            </div>
        </van-popup>
    </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { showToast, showConfirmDialog } from 'vant'
import { trainingApi, type AiCharacter, type TrainingScenario, type TrainingMessage } from '@/api'

const router = useRouter()
const route = useRoute()

// 响应式数据
const character = ref<AiCharacter | null>(null)
const scenario = ref<TrainingScenario | null>(null)
const messages = ref<TrainingMessage[]>([])
const inputMessage = ref('')
const isAiTyping = ref(false)
const isSending = ref(false)
const showInput = ref(false)
const elapsedTime = ref(0)
const trainingStartTime = ref<Date | null>(null)
const timer = ref<number | null>(null)

// 弹窗状态
const showPausePopup = ref(false)
const showHintsPopup = ref(false)
const showSuggestionsPopup = ref(false)

// 训练辅助数据
const quickReplies = ref<Array<{ id: number; text: string }>>([])
const currentHints = ref<Array<{ id: number; text: string }>>([])
const currentSuggestions = ref<Array<{ id: number; text: string; reason: string }>>([])

const messagesContainer = ref<HTMLElement>()

// 计算属性
const sessionId = computed(() => {
    const characterId = route.query.characterId || 'unknown'
    const scenarioId = route.query.scenarioId || 'unknown'
    return `${characterId}_${scenarioId}_${Date.now()}`
})

// 方法
const loadData = async () => {
    try {
        const characterId = route.query.characterId
        const scenarioId = route.query.scenarioId

        if (!characterId || !scenarioId) {
            showToast('Missing parameters')
            router.back()
            return
        }

        // 加载角色和场景信息
        const [charactersResponse, scenariosResponse] = await Promise.all([
            trainingApi.getCharacters(),
            trainingApi.getScenarios()
        ])

        character.value = charactersResponse.data.find(
            char => char.id === parseInt(characterId as string)
        ) || null

        scenario.value = scenariosResponse.data.find(
            scen => scen.id === parseInt(scenarioId as string)
        ) || null

        if (!character.value || !scenario.value) {
            showToast('Character or scenario not found')
            router.back()
            return
        }

        // 开始训练会话
        await startTrainingSession()
    } catch (error) {
        console.error('Failed to load training data:', error)
        showToast('Failed to start training')
        router.back()
    }
}

const startTrainingSession = async () => {
    try {
        trainingStartTime.value = new Date()
        startTimer()

        // 发送初始AI消息
        await sendInitialMessage()

        // 加载快速回复建议
        loadQuickReplies()
    } catch (error) {
        console.error('Failed to start training session:', error)
        showToast('Failed to start training session')
    }
}

const sendInitialMessage = async () => {
    if (!character.value || !scenario.value) return

    isAiTyping.value = true

    // 模拟AI思考时间
    await new Promise(resolve => setTimeout(resolve, 2000))

    const initialMessage: TrainingMessage = {
        id: Date.now(),
        session_id: sessionId.value,
        sender_type: 'ai',
        content: getInitialAiMessage(),
        created_at: new Date().toISOString()
    }

    messages.value.push(initialMessage)
    isAiTyping.value = false

    await nextTick()
    scrollToBottom()
}

const getInitialAiMessage = (): string => {
    if (!scenario.value) return 'Hello! Let\'s start our training session.'

    const greetings: Record<string, string> = {
        'workplace': 'Good morning! I\'m glad we could meet today. I understand you wanted to discuss the project timeline?',
        'social': 'Hey there! Nice to see you at the party. How are you enjoying the evening so far?',
        'academic': 'Hello! I see you\'re interested in discussing the research methodology. What specific aspects would you like to explore?',
        'interview': 'Good afternoon! Thank you for coming in today. I\'m excited to learn more about your background and experience.',
        'daily': 'Hi! How can I help you today?'
    }

    const category = scenario.value.category?.toLowerCase() || ''
    return greetings[category] ||
        scenario.value.sample_conversation ||
        'Hello! I\'m ready to start our conversation. How are you today?'
}

const sendMessage = async () => {
    if (!inputMessage.value.trim() || isSending.value || isAiTyping.value) return

    const messageText = inputMessage.value.trim()
    inputMessage.value = ''
    isSending.value = true

    try {
        // 添加用户消息
        const userMessage: TrainingMessage = {
            id: Date.now(),
            session_id: sessionId.value,
            sender_type: 'user',
            content: messageText,
            created_at: new Date().toISOString()
        }

        messages.value.push(userMessage)
        await nextTick()
        scrollToBottom()

        // 生成AI回复
        await generateAiResponse(messageText)
    } catch (error) {
        console.error('Failed to send message:', error)
        showToast('Failed to send message')
    } finally {
        isSending.value = false
    }
}

const generateAiResponse = async (userMessage: string) => {
    isAiTyping.value = true

    // 模拟AI处理时间
    await new Promise(resolve => setTimeout(resolve, 1500 + Math.random() * 2000))

    try {
        // 这里应该调用AI API生成回复
        // 现在使用模拟回复
        const aiResponse = generateMockAiResponse(userMessage)

        const aiMessage: TrainingMessage = {
            id: Date.now() + 1,
            session_id: sessionId.value,
            sender_type: 'ai',
            content: aiResponse,
            created_at: new Date().toISOString()
        }

        messages.value.push(aiMessage)
        isAiTyping.value = false

        await nextTick()
        scrollToBottom()

        // 更新快速回复建议
        loadQuickReplies()
    } catch (error) {
        console.error('Failed to generate AI response:', error)
        isAiTyping.value = false
        showToast('AI response failed')
    }
}

const generateMockAiResponse = (_userMessage: string): string => {
    const responses: string[] = [
        'That\'s an interesting perspective. Could you tell me more about your thoughts on this?',
        'I understand your point. How do you think we should approach this situation?',
        'Thank you for sharing that. What would you like to focus on next?',
        'That makes sense. Can you give me a specific example of what you mean?',
        'I appreciate your input. How do you feel about trying a different approach?'
    ]

    const randomIndex = Math.floor(Math.random() * responses.length)
    return responses[randomIndex] as string
}

const selectQuickReply = (reply: { id: number; text: string }) => {
    inputMessage.value = reply.text
    showInput.value = true
}

const loadQuickReplies = () => {
    // 根据当前对话上下文生成快速回复建议
    const replies = [
        { id: 1, text: 'I understand your point.' },
        { id: 2, text: 'Could you explain that further?' },
        { id: 3, text: 'That\'s a great suggestion.' },
        { id: 4, text: 'I have a different perspective.' }
    ]

    quickReplies.value = replies
}

const giveFeedback = async (message: TrainingMessage, feedback: 'helpful' | 'not_helpful') => {
    try {
        message.feedback = feedback
        // 这里应该发送反馈到后端
        showToast(feedback === 'helpful' ? 'Feedback: Helpful' : 'Feedback: Not Helpful')
    } catch (error) {
        console.error('Failed to give feedback:', error)
    }
}

const getMessageClass = (message: TrainingMessage) => {
    return message.sender_type === 'ai' ? 'ai-message' : 'user-message'
}

const getScenarioIcon = (category?: string) => {
    const icons: Record<string, string> = {
        'workplace': 'manager-o',
        'social': 'friends-o',
        'academic': 'certificate',
        'daily': 'home-o'
    }
    return icons[category?.toLowerCase() || ''] || 'chat-o'
}

const getScenarioObjectives = () => {
    if (!scenario.value) return []

    const objectiveMap: Record<string, string[]> = {
        'workplace': ['Professional communication', 'Team collaboration'],
        'social': ['Casual conversation', 'Building rapport'],
        'academic': ['Academic discussion', 'Critical thinking'],
        'interview': ['Interview skills', 'Professional presentation']
    }

    const category = scenario.value.category?.toLowerCase() || ''
    return objectiveMap[category] || ['Communication skills']
}

const formatTime = (seconds: number) => {
    const mins = Math.floor(seconds / 60)
    const secs = seconds % 60
    return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
}

const formatMessageTime = (timestamp: string) => {
    return new Date(timestamp).toLocaleTimeString('en-US', {
        hour: '2-digit',
        minute: '2-digit'
    })
}

const startTimer = () => {
    timer.value = setInterval(() => {
        elapsedTime.value++
    }, 1000)
}

const stopTimer = () => {
    if (timer.value) {
        clearInterval(timer.value)
        timer.value = null
    }
}

const scrollToBottom = () => {
    if (messagesContainer.value) {
        messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight
    }
}

const handleKeyUp = (event: KeyboardEvent) => {
    if (event.key === 'Enter' && !event.shiftKey) {
        event.preventDefault()
        sendMessage()
    }
}

const handleInputBlur = () => {
    setTimeout(() => {
        if (!inputMessage.value.trim()) {
            showInput.value = false
        }
    }, 100)
}

const pauseTraining = () => {
    showPausePopup.value = true
    stopTimer()
}

const resumeTraining = () => {
    showPausePopup.value = false
    startTimer()
}

const endTraining = async () => {
    try {
        const result = await showConfirmDialog({
            title: 'End Training',
            message: 'Are you sure you want to end this training session?'
        })

        if (result === 'confirm') {
            stopTimer()
            // 跳转到训练复盘页面
            router.push({
                name: 'TrainingReview',
                query: {
                    sessionId: sessionId.value,
                    characterId: route.query.characterId,
                    scenarioId: route.query.scenarioId,
                    duration: elapsedTime.value,
                    messageCount: messages.value.length
                }
            })
        }
    } catch (error) {
        // 用户取消
    }
}

const handleExit = async () => {
    await endTraining()
}

const showHints = () => {
    currentHints.value = [
        { id: 1, text: 'Take your time to think before responding' },
        { id: 2, text: 'Ask clarifying questions when needed' },
        { id: 3, text: 'Show empathy and understanding' }
    ]
    showHintsPopup.value = true
}

const showSuggestions = () => {
    currentSuggestions.value = [
        {
            id: 1,
            text: 'I understand your perspective, and I\'d like to share mine as well.',
            reason: 'Shows respect while asserting your viewpoint'
        },
        {
            id: 2,
            text: 'Could you help me understand the reasoning behind that?',
            reason: 'Seeks clarification without being confrontational'
        },
        {
            id: 3,
            text: 'That\'s an interesting point. Let me think about that for a moment.',
            reason: 'Acknowledges their input and shows thoughtful consideration'
        }
    ]
    showSuggestionsPopup.value = true
}

const selectSuggestion = (suggestion: { id: number; text: string; reason: string }) => {
    inputMessage.value = suggestion.text
    showSuggestionsPopup.value = false
    showInput.value = true
}

// 生命周期
onMounted(() => {
    loadData()
})

onUnmounted(() => {
    stopTimer()
})
</script>

<style lang="scss" scoped>
.training-chat-page {
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: #f7f8fa;

    .nav-title {
        .character-info {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 16px;
            color: #323233;
        }
    }

    .training-status {
        background: white;
        padding: 12px 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #ebedf0;

        .scenario-info {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 14px;
            color: #646566;

            .van-icon {
                color: #1989fa;
            }
        }

        .training-progress {
            display: flex;
            gap: 16px;

            .progress-item {
                display: flex;
                align-items: center;
                gap: 4px;
                font-size: 12px;
                color: #969799;

                .van-icon {
                    color: #07c160;
                }
            }
        }
    }

    .messages-container {
        flex: 1;
        overflow-y: auto;
        padding: 16px 20px;

        .messages-list {
            .message {
                display: flex;
                gap: 12px;
                margin-bottom: 16px;

                &:last-child {
                    margin-bottom: 0;
                }

                &.system-message {
                    justify-content: center;

                    .message-content {
                        background: #e8f4fd;
                        border: 1px solid #1989fa;
                        border-radius: 12px;
                        padding: 16px;
                        max-width: 90%;

                        .scenario-intro {
                            h4 {
                                font-size: 16px;
                                color: #1989fa;
                                margin: 0 0 8px 0;
                                font-weight: 600;
                            }

                            p {
                                font-size: 14px;
                                color: #646566;
                                margin: 0 0 12px 0;
                                line-height: 1.5;
                            }

                            .scenario-objectives {
                                font-size: 13px;
                                color: #646566;

                                strong {
                                    color: #323233;
                                }

                                ul {
                                    margin: 4px 0 0 0;
                                    padding-left: 16px;

                                    li {
                                        margin-bottom: 2px;
                                    }
                                }
                            }
                        }
                    }
                }

                &.ai-message {
                    .message-content {
                        background: white;
                        border-radius: 12px 12px 12px 4px;
                        padding: 12px 16px;
                        max-width: 70%;
                        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);

                        .message-header {
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            margin-bottom: 8px;

                            .sender-name {
                                font-size: 14px;
                                font-weight: 500;
                                color: #1989fa;
                            }

                            .message-time {
                                font-size: 12px;
                                color: #969799;
                            }
                        }

                        .message-text {
                            font-size: 15px;
                            color: #323233;
                            line-height: 1.5;
                            margin-bottom: 8px;
                        }

                        .message-actions {
                            display: flex;
                            gap: 8px;
                            margin-top: 8px;

                            .van-button {
                                font-size: 12px;
                            }
                        }
                    }

                    .typing-indicator {
                        background: white;
                        border-radius: 12px 12px 12px 4px;
                        padding: 12px 16px;
                        display: flex;
                        align-items: center;
                        gap: 8px;

                        .typing-dots {
                            display: flex;
                            gap: 4px;

                            span {
                                width: 6px;
                                height: 6px;
                                background: #1989fa;
                                border-radius: 50%;
                                animation: typing 1.4s infinite ease-in-out;

                                &:nth-child(1) {
                                    animation-delay: -0.32s;
                                }

                                &:nth-child(2) {
                                    animation-delay: -0.16s;
                                }
                            }
                        }

                        .typing-text {
                            font-size: 13px;
                            color: #969799;
                        }
                    }
                }

                &.user-message {
                    flex-direction: row-reverse;

                    .message-content {
                        background: #07c160;
                        color: white;
                        border-radius: 12px 12px 4px 12px;
                        padding: 12px 16px;
                        max-width: 70%;

                        .message-text {
                            font-size: 15px;
                            line-height: 1.5;
                        }
                    }
                }

                .message-avatar {
                    flex-shrink: 0;
                    align-self: flex-end;
                }
            }
        }
    }

    .input-area {
        background: white;
        border-top: 1px solid #ebedf0;
        padding: 16px 20px;

        .quick-replies {
            margin-bottom: 12px;

            .quick-replies-header {
                font-size: 12px;
                color: #969799;
                margin-bottom: 8px;
            }

            .quick-replies-list {
                display: flex;
                gap: 8px;
                flex-wrap: wrap;

                .van-button {
                    font-size: 12px;
                }
            }
        }

        .message-input {
            display: flex;
            gap: 12px;
            align-items: flex-end;
            margin-bottom: 12px;

            :deep(.van-field) {
                flex: 1;
                background: #f7f8fa;
                border-radius: 20px;
                padding: 8px 16px;

                .van-field__control {
                    min-height: 20px;
                    max-height: 80px;
                }
            }

            .input-actions {
                flex-shrink: 0;
            }
        }

        .training-tools {
            display: flex;
            justify-content: center;
            gap: 12px;

            .van-button {
                font-size: 12px;
            }
        }
    }

    .pause-popup,
    .hints-popup,
    .suggestions-popup {
        padding: 24px;

        .popup-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;

            h3 {
                font-size: 18px;
                color: #323233;
                margin: 0;
                font-weight: 600;
            }

            .van-icon {
                color: #969799;
                cursor: pointer;
            }
        }

        .popup-content {
            margin-bottom: 20px;

            p {
                font-size: 14px;
                color: #646566;
                line-height: 1.5;
                margin: 0 0 16px 0;
            }

            .pause-stats {
                .stat-item {
                    display: flex;
                    justify-content: space-between;
                    margin-bottom: 8px;
                    font-size: 14px;

                    .label {
                        color: #646566;
                    }

                    .value {
                        color: #323233;
                        font-weight: 500;
                    }
                }
            }

            .hint-item {
                display: flex;
                align-items: flex-start;
                gap: 8px;
                margin-bottom: 12px;
                font-size: 14px;
                color: #646566;
                line-height: 1.5;

                .van-icon {
                    color: #ffd21e;
                    margin-top: 2px;
                    flex-shrink: 0;
                }
            }

            .suggestion-item {
                padding: 16px;
                background: #f7f8fa;
                border-radius: 8px;
                margin-bottom: 12px;
                cursor: pointer;
                transition: background-color 0.3s;

                &:hover {
                    background: #ebedf0;
                }

                .suggestion-text {
                    font-size: 15px;
                    color: #323233;
                    margin-bottom: 4px;
                    line-height: 1.4;
                }

                .suggestion-reason {
                    font-size: 12px;
                    color: #969799;
                    line-height: 1.3;
                }
            }
        }

        .popup-actions {
            .van-button {
                margin-bottom: 8px;

                &:last-child {
                    margin-bottom: 0;
                }
            }
        }
    }
}

@keyframes typing {

    0%,
    80%,
    100% {
        transform: scale(0);
    }

    40% {
        transform: scale(1);
    }
}
</style>